import React from 'react';
import styles from './index.less';
import { debounce } from 'lodash';
import { AutoComplete, Button, Drawer, Input, message, Radio, Select, Space, Switch, Tabs, Tooltip } from 'antd';

class PcPlatform extends React.Component {

  constructor(props) {
    super(props);

    this.state = {};

  }

  componentDidMount() {

  }

  render() {
    // 参数区
    const {
      drawShow,
      videoUrl,
      videoLineList,
      channelAddrList,
      videoName,
      videoChannelList,
      parseLine,
      searchKeyword,
      isSearchLoading,
      searchAutoCompleteDataList,
      searchChannel,
      hotKeywordList,
    } = this.props;
    // 方法区
    const {
      onCloseDraw,
      onUpdateState,
      onVideoItemChange,
      playAddressBtnShow,
      searchVideoResultList,
      onSearchVideo,
      onSearchVideoItemList,
      onDirectParseVideo,
      onVideoTitleChange,
      onVideoLineChange,
    } = this.props;

    const videoTabsDataList = [];
    videoChannelList?.sort((a, b) => a.channelName.length > b.channelName.length ? -1 : 1)
      .forEach((videoChannel, idx) => {
        const { channelName, videoItemList } = videoChannel;
        const videoTabsChildrenDataList = videoItemList?.map(videoItem => {
          const isChange = videoItem.url === videoUrl;
          const isClick = !!videoItem?.url;
          let borderColor = '', color = '', bgColor = '';
          if (isClick) {
            borderColor = isChange ? 'mediumvioletred' : '';
            color = isChange ? 'mediumvioletred' : '';
          } else {
            borderColor = '1px solid #e9e9e9';
            bgColor = '#ececec';
            color = '#999';
          }
          return (
            <span
              key={`video_item_${idx + 1}_${videoItem.url}`}
              style={{
                borderColor: borderColor,
                color: color,
                background: bgColor,
                pointerEvents: isClick ? 'auto' : 'none',
              }}
              onClick={() => onVideoItemChange(videoItem)}>
              {videoItem.name}
            </span>
          );
        });

        videoTabsDataList.push({
          label: channelName,
          key: (idx + 1),
          children: (
            <div style={{ width: '100%' }}>
              <Space size={[8, 12]} wrap>{videoTabsChildrenDataList}</Space>
            </div>
          ),
        });
      });

    return (
      <div className={styles.wrap}>
        <Drawer
          key={'drawer-a'}
          className={styles.drawer}
          width={'640px'}
          closable={false}
          maskClosable={false}
          open={drawShow}
          footer={
            <div className={styles.footer}>
              <Button
                danger
                onClick={onCloseDraw}
                style={{ float: 'left' }}
              >关闭</Button>
              <div className={styles.publicAddr}>项目开源地址：<a href={'https://gitee.com/aixtvip/video-app-client'}>https://gitee.com/aixtvip/video-app-client</a></div>
            </div>
          }
        >
          <div className={styles.item}>
            <span className={styles.title}>播放渠道</span>
            <div className={styles.channel}>
              <Space size={[8, 10]} wrap>
                {
                  channelAddrList?.map((item, idx) => {
                    return (<label key={`channel_${idx}`} onClick={() => window.open(item.url)}>{item.name}</label>);
                  })
                }
              </Space>
            </div>
          </div>

          <div className={styles.item}>
            <span className={styles.title}>播放地址</span>
            <div className={styles.advanceBtn}>
              <Switch
                checkedChildren='搜索'
                unCheckedChildren='搜索'
                checked={playAddressBtnShow}
                onChange={v => onUpdateState({ playAddressBtnShow: v })}
              />
            </div>
            <div>
              {!playAddressBtnShow && <Input.TextArea
                key={'videoUrlKey'}
                allowClear
                rows={4}
                style={{ wordBreak: 'break-all' }}
                placeholder={'请在播放渠道中选择想要观看的电影，将播放地址复制到此处...'}
                defaultValue={videoUrl}
                value={videoUrl}
                onChange={e => onUpdateState({ videoUrl: e.target.value })}
              />}
              {
                playAddressBtnShow && (
                  <div className={styles.playAddressBtn}>
                    {/* 搜索栏 */}
                    <div className={styles.searchVideo}>
                      <Space>
                        <AutoComplete
                          allowClear
                          value={searchKeyword || ''}
                          options={searchAutoCompleteDataList || []}
                          // onClick={}
                          // 选择到某一项时调用
                          onSelect={(value, option) => {
                            onUpdateState({ searchKeyword: value });
                          }}
                          // 输入框内容变化时调用
                          onSearch={value => {
                            onUpdateState({ searchKeyword: value });
                            debounce(() => {
                              onSearchVideo(value);
                            }, 500)();
                          }}
                          // onKeyDown={e => {
                          //   if(e.key === 'Enter') {
                          //     debounce(() => {
                          //       onSearchVideo(searchKeyword);
                          //     }, 200)();
                          //   }
                          // }}
                          style={{ width: '220px' }}
                          placeholder={'请输入视频名称'}
                        >
                        </AutoComplete>
                        <Button
                          type={'primary'}
                          ghost
                          onClick={() => onSearchVideoItemList()}
                          disabled={isSearchLoading}>
                          搜索
                        </Button>

                        <Radio.Group
                          onChange={e => {
                            onUpdateState({ searchChannel: e.target.value });
                          }}
                          value={searchChannel}
                        >
                          <Tooltip title={'速度慢，内容少，稳定'}>
                            <Radio key={`radio_search_1_${Date.now()}`} value={1}>官方搜索</Radio>
                          </Tooltip>
                          <Tooltip title={'快的很，内容多，容易嗝屁'}>
                            <Radio key={`radio_search_2_${Date.now()}`} value={2}>快速搜索</Radio>
                          </Tooltip>
                        </Radio.Group>
                      </Space>
                    </div>
                    <div className={styles.tipsWrap}>
                      {/*<span*/}
                      {/*  style={{ display: isSearchLoading ? 'block' : 'none' }}*/}
                      {/*  className={styles.tips}>警告：恶意、低俗内容直接封IP。(非精确检索时，搜索结果可能展示不全)</span>*/}

                      <span className={styles.hot}>
                        热门搜索：
                        {
                          hotKeywordList.map(keyword => {
                            return (
                              <div
                                onClick={() => {
                                  if(!isSearchLoading) {
                                    onUpdateState({ searchKeyword: keyword });
                                    setTimeout(() => onSearchVideoItemList())
                                  } else {
                                    message.warn('请稍等，正在检索')
                                  }
                              }}>
                                {keyword}
                              </div>
                            )
                          })
                        }
                      </span>
                    </div>

                    {/* 搜索到的视频结果展示 */}
                    <div
                      className={styles.searchVideoItem}
                      style={{ display: (isSearchLoading || searchVideoResultList.length === 0) ? 'none' : 'block' }}>
                      <Space size={[8, 10]} wrap>
                        {
                          searchVideoResultList?.map((item, idx) => {
                            const isChange = item.title === videoName;
                            const changeColor = isChange ? 'mediumvioletred' : '';
                            return (
                              <label
                                key={`search_lab_${idx}`}
                                style={{ borderColor: changeColor, color: changeColor }}
                                onClick={() => onVideoTitleChange(item)}>{item.title}
                              </label>);
                          })
                        }
                      </Space>
                    </div>
                  </div>
                )
              }
            </div>
          </div>

          <div className={styles.item}>
            <span className={styles.title}>播放线路</span>
            <div className={styles.parseBtn}>
              <Space>
                <Select
                  onChange={value => onVideoLineChange(value)}
                  defaultValue={parseLine}
                  placeholder={'请选择播放线路'}
                  style={{ width: '180px' }}>
                  {
                    videoLineList?.map(item => {
                      return (<Select.Option key={item.name} value={item.url}>{item.name}</Select.Option>);
                    })
                  }
                </Select>
                <div style={{ display: playAddressBtnShow ? 'none' : 'block' }}>
                  <Space>
                    <Button type={'primary'} ghost onClick={() => onDirectParseVideo()}>解析</Button>
                  </Space>
                </div>
              </Space>
            </div>
            <div className={styles.gonggao} style={{ display: !!videoName ? 'none' : 'block' }}>
              <div>请不要打开页面上的<span>任何广告</span>信息</div>
              <div>我不会放置<span>广告</span>，项目即兴研发且<span>免费</span></div>
            </div>
          </div>

          <div className={styles.item} style={{ display: !!videoName ? 'block' : 'none' }}>
            <span className={styles.title}>{videoName}</span>
            <div className={styles.videoList}>
              {videoChannelList?.length > 0 && <Tabs
                size={'small'}
                defaultActiveKey={1}
                items={videoTabsDataList}
              />}
              {videoChannelList?.length === 0 && <div>暂无播放渠道</div>}
            </div>
          </div>
        </Drawer>
      </div>
    );
  }
}

export default PcPlatform;